<template>
  <div class="left-chart-1">
    <dv-charts class="lc1-chart" :option="option" />
    <dv-decoration-2 style="height:10px;" />
  </div>
</template>

<script>
export default {
  name: "CmpBarChart",
  data() {
    return {
      option: {
        title: {
          text: "柱状图",
          offset: [0, -20],
          style: { fill: "#fff", fontSize: 24, textAlign: "center" }
        },
        grid: {
          left: "12%",
          right: "5%",
          bottom: "10%"
        },
        xAxis: {
          // name: '第一周',
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          axisLabel: {
            show: true,
            style: {
              fontSize: 12,
              stroke: "#fff",
              fontFamily: "Microsoft YaHei"
            }
          },
          axisLine: {
            show: true,
            style: {
              stroke: "#fff"
            }
          },
          axisTick: {
            show: true,
            style: {
              stroke: "#fff"
            }
          }
        },
        yAxis: {
          name: "销售额",
          data: "value",
          axisLabel: {
            show: true,
            style: {
              fontSize: 12,
              stroke: "#fff",
              fontFamily: "Microsoft YaHei"
            }
          },
          axisLine: {
            show: true,
            style: {
              stroke: "#fff"
            }
          },
          axisTick: {
            show: true,
            style: {
              stroke: "#fff"
            }
          }
        },
        series: [
          {
            data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
            type: "bar",
            label: {
              fontSize: 14,
              color: "#fff"
              //   position: 'center',
            },
            gradient: {
              color: ["#37a2da", "#67e0e3"]
            }
          }
        ]
      }
    };
  }
};
</script>

<style lang="scss">
.left-chart-1 {
  width: 100%;
  height: 37%;
  display: flex;
  flex-grow: 0;
  flex-direction: column;

  .lc1-header {
    text-align: center;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    margin-bottom: 20px;
  }

  .lc1-details {
    height: 50px;
    font-size: 16px;
    display: flex;
    align-items: center;
    text-indent: 20px;

    span {
      color: #096dd9;
      font-weight: bold;
      font-size: 35px;
      margin-left: 20px;
    }
  }

  .lc1-chart {
    flex: 1;
  }
}
</style>
